<template>
    <div>
        <el-card class="card h-[70vh]">
            <h1 class="manage text-2xl border-b-2 pb-3">系统管理</h1>
            <el-form :model="form" label-width="120px" class="card-box  mt-5 ">
                <el-form-item label="姓名">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex" class="ml-4">
                        <el-radio label="男" />
                        <el-radio label="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" />
                </el-form-item>
                <el-form-item label="选择专业" prop="major">
                    <el-select v-model="form.major" placeholder="请选择专业">
                        <el-option label="前端开发" value="front" />
                        <el-option label="视觉设计" value="esay" />
                        <el-option label="全栈开发" value="open" />
                        <el-option label="人工智能" value="peopel" />
                    </el-select>
                </el-form-item>
                <el-form-item label="是否毕业" prop="graduation">
                    <el-switch v-model="form.graduation" />
                </el-form-item>
                <el-form-item label="个人介绍" prop="intro">
                    <el-input v-model="form.intro" type="textarea" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="sumbit(form)" class="btn mt-2 bg-cyan-300">添加学生</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { getStudent } from '../utils/API'
const form = reactive({
    username: '翻斗花园小美',
    sex: '女',
    age: '',
    major: '',
    graduation: false,
    intro: ''
})
const sumbit = async (form) => {
    // console.log(form);
    try {
        const res = await getStudent(form)
        console.log(res);
    } catch (error) {
        console.log(error);
    }
}
</script>
<style scoped>

</style>